<template>
  <Global>
    <div class="read">
      <web-view :src="readUrl"></web-view>
    </div>
  </Global>
</template>

<script>
import Global from '@/components/Global'

export default {
  components: {
    Global
  },
  computed: {
    readUrl() {
      if (this.fileName && this.opf) {
        let base = `http://localhost:8088/#/ebook/${this.fileName}?opf=${this.opf}`
        // let base = `http://localhost:8088/#/ebook`
        // let base = `http://localhost:8088/#/ebook/${this.fileName}`
        if (this.navigation) {
          base = `${base}&navigation=${this.navigation}`
        }
        base = `${base}&isMp=true`
        console.log('url:', base)
        return base
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      fileName: null,
      opf: null,
      navigation: null
    }
  },
  mounted() {
    this.fileName = this.$route.query.fileName || ''
    this.opf = this.$route.query.opf || ''
    this.navigation = this.$route.query.navigation
  }
}
</script>

<style lang="scss" scoped>
</style>
